<template>
    <div class="faceWrapper">
        <HandAni></HandAni>
        <div class="wrapper" :class="{smaller: isSmaller}">
          <div class="anim-box">
            <div class="head" :class="[{primary: isPrimary}, {symmetry: !isPrimary}]"></div>
            <div class="beiShuang"></div>

            <div class="gun"></div>
            <div class="wire" :class="{wireMove: showWire}" v-show="showWire"></div>
            <div class="flag" :class="{flagMove: showFlag}" v-show="showFlag"></div>

            <div class="computer"></div>
            <div class="light1" v-show="showLight1"></div>
            <div class="light2" v-show="showLight2"></div>

            <div class="btn" @touchend="toJie()"></div>
          </div>

        </div>

    </div>
</template>

<script>
    import HandAni from './handAni.vue';

    export default {

        props: ['resources', 'pageType', 'jieImg'],
        data() {
            return{
                isPrimary: false,
                showWire: false,
                showFlag: false,
                showLight1: true,
                showLight2: true,
              isSmaller: false,
            }
        },
        mounted() {

          var clientWidth = document.documentElement.clientWidth;
          var clientHeight = document.documentElement.clientHeight;
          this.isSmaller = clientWidth/clientHeight > 0.66 ? true : false;
          console.log(clientWidth/clientHeight, this.isSmaller);

          this.toggleFace();
            this.tinkleLight();

            setTimeout(() => {
                this.showWire = true;
            }, 1000);
            setTimeout(() =>{
                this.showFlag = true;
            }, 1100);


        },
        methods: {
            toggleFace() {
                setInterval(() => {
                    this.isPrimary = this.isPrimary ? false : true;
                }, 500);
            },
            tinkleLight() {
                setInterval(() => {
                    this.showLight1 = this.showLight1 ? false : true;
                    this.showLight2 = this.showLight2 ? false : true;
                }, 250);
            },
            toJie() {
                console.log('jie', this.jieImg);
                this.$emit('update:jieImg', 'handJie');
                this.$emit('update:pageType', 'jie');
            }
        },
        components: {
            HandAni
        }
    }
</script>
<style lang="less" scoped>
    .faceWrapper{
        height: 100%;
        width: 100%;
        background-image: url("../../img/index/background.jpg");
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: bottom;
        overflow: hidden;
        .wrapper{
            height: 100%;
            width: 100%;
            background-image: url("../../img/hand/handText.png");
            background-size: 100%;
            background-repeat: no-repeat;
            background-position: center 90%;
            position: relative;
            //top: 1rem;
          .anim-box {
            position: absolute;
            top: 0.9rem;
            width: 100%;
            height: 100%;
            .head {
              width: 3.52rem;
              height: 3.36rem;
              position: absolute;
              bottom: 6.45rem;
              left: 3.23rem;
              background-image: url("../../img/hand/leftHead.png");
              background-size: 100%;
              background-repeat: no-repeat;
            }
            .primary {
              transform: rotateY(0deg);
            }
            .symmetry {
              transform: rotateY(180deg);
            }

            .btn {
              width: 2.56rem;
              height: 2.56rem;
              position: absolute;
              left: 3.71rem;
              bottom: 1.9rem;
            }

            .beiShuang {
              width: 0.8rem;
              height: 1.69rem;
              position: absolute;
              bottom: 8.27rem;
              left: 6.35rem;
              background-image: url("../../img/hand/beiShuang.png");
              background-size: 100%;
              background-repeat: no-repeat;
              -webkit-animation: shuangScale 1s infinite;
              animation: shuangScale 1s infinite;
            }
            @keyframes shuangScale {
              0% {
                transform: scale(0.8);
              }
              50% {
                transform: scale(1);
              }
              100% {
                transform: scale(0.8);
              }
            }
            @-webkit-keyframes shuangScale {
              0% {
                transform: scale(0.8);
              }
              50% {
                transform: scale(1);
              }
              100% {
                transform: scale(0.8);
              }
            }

            .gun {
              width: 1.29rem;
              height: 1.73rem;
              position: absolute;
              bottom: 5.36rem;
              left: 0px;
              background-image: url("../../img/hand/gun.png");
              background-size: 100%;
              background-repeat: no-repeat;
              -webkit-animation: gunMove 1s;
              animation: gunMove 1s;
            }
            @keyframes gunMove {
              0% {
                left: -1.29rem;
              }
              100% {
                left: 0;
              }
            }
            @-webkit-keyframes gunMove {
              0% {
                left: -1.29rem;
              }
              100% {
                left: 0;
              }
            }

            .wire {
              width: 0.97rem;
              height: 0.61rem;
              position: absolute;
              bottom: 6.92rem;
              left: 1.19rem;
              background-image: url("../../img/hand/wire.png");
              background-size: 100%;
              background-repeat: no-repeat;
            }
            .wireMove {
              -webkit-animation: wireMove 0.2s;
              animation: wireMove 0.2s;
            }
            @keyframes wireMove {
              0% {
                width: 0;
                height: 0;
              }
              100% {
                width: 0.97rem;
                height: 0.61rem;
              }
            }
            @-webkit-keyframes wireMove {
              0% {
                width: 0;
                height: 0;
              }
              100% {
                width: 0.97rem;
                height: 0.61rem;
              }
            }

            .flag {
              width: 1.03rem;
              height: 1.03rem;
              position: absolute;
              bottom: 6.47rem;
              left: 1.45rem;
              background-image: url("../../img/hand/flag.png");
              background-size: 100%;
              background-repeat: no-repeat;
            }
            .flagMove {
              -webkit-animation: flagMove 0.2s;
              animation: flagMove 0.2s;
            }
            @keyframes flagMove {
              0% {
                left: 1.97rem;
                bottom: 7.23rem;
                width: 0;
                height: 0;
                opacity: 0;
              }
              100% {
                bottom: 6.47rem;
                left: 1.45rem;
                width: 1.03rem;
                height: 1.03rem;
                opacity: 1;
              }
            }
            @-webkit-keyframes flagMove {
              0% {
                left: 1.97rem;
                bottom: 7.23rem;
                width: 0;
                height: 0;
                opacity: 0;
              }
              100% {
                bottom: 6.47rem;
                left: 1.45rem;
                width: 1.03rem;
                height: 1.03rem;
                opacity: 1;
              }
            }

            .computer {
              width: 2.13rem;
              height: 1.69rem;
              position: absolute;
              bottom: 7.93rem;
              left: 7.72rem;
              background-image: url("../../img/hand/computer.png");
              background-size: 100%;
              background-repeat: no-repeat;
            }
            .light1 {
              width: 0.33rem;
              height: 0.44rem;
              position: absolute;
              bottom: 7.72rem;
              left: 7.61rem;
              background-image: url("../../img/hand/light1.png");
              background-size: 100%;
              background-repeat: no-repeat;
            }
            .light2 {
              width: 0.51rem;
              height: 0.48rem;
              position: absolute;
              bottom: 9.48rem;
              left: 9.05rem;
              background-image: url("../../img/hand/light2.png");
              background-size: 100%;
              background-repeat: no-repeat;
            }
          }
        }
        .smaller{
            top: 1.1rem;
        }
    }
</style>
